<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>信息认证-申请</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/common.css" rel="stylesheet"/>
    <link href="css/mui.picker.css" rel="stylesheet" />
    <link href="css/mui.poppicker.css" rel="stylesheet" />
    <link href="css/validate.css" rel="stylesheet" />
    <script src="js/mui.picker.js"></script>
    <script src="js/mui.poppicker.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        .mui-input-group {
            margin-top: 10px;
        }

        .zvalid-resultformat{
            padding: 0;
        }
        .field-invalidmsg{
            padding: 10px 15px;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
    <h1 class="mui-title">信息认证-申请</h1>
</header>
<div class="mui-content">
    <div class="mui-content-padded">
        <p>
            为了确保您的申请信息顺利提交，请填写如下认证信息。<br />
            只有认证成功后才能报送保单信息。
        </p>
    </div>
    <form id="login-form">
        <div  class="mui-input-group">
            <input name="openId" type="hidden" value="">
            <div class="mui-input-row">
                <label>姓   名</label>
                <input name='userName' type="text" class="mui-input-clear mui-input" placeholder="请输入姓名" value="" data-validate="userName" data-describedby="userName-description">
            </div>
            <div id="userName-description"></div>
            <div class="mui-input-row">
                <label>手机号</label>
                <input name='phoneNo' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号" value="" data-validate="phoneNo" data-describedby="phoneNo-description">
            </div>
            <div id="phoneNo-description"></div>
            <div class="mui-input-row">
                <label>身份证</label>
                <input name='idCard' type="text" class="mui-input-clear mui-input" placeholder="请输入身份证号码" value="" data-validate="idCard" data-describedby="idCard-description">
            </div>
            <div id="idCard-description"></div>
            <div class="mui-input-row">
                <label>邀请码</label>
                <input name='inviteCode' type="text" class="mui-input-clear mui-input" placeholder="请输入邀请码" value="" data-validate="inviteCode" data-describedby="inviteCode-description">
            </div>
            <div id="inviteCode-description"></div>
            <div class="mui-input-row">
                <label>区域</label>
                <select class="mui-input-clear mui-input" name="area">
                    <option value="华东">华东</option>
                    <option value="华中">华中</option>
                    <option value="华南">华南</option>
                    <option value="华北">华北</option>
                    <option value="华西">华西</option>
                </select>
            </div>
        </div>

        <div class="mui-content-padded" style="margin-top: 50px;">
            <button type="submit" class="mui-btn mui-btn-primary mui-btn-block" id="submitBtn" data-loading-icon="mui-spinner mui-spinner-white" data-loading-text="提交中...">我要认证</button>
        </div>
    </form>
</div>
<footer>
    <!--<section class="weui-menu">
        <div class="weui-menu-inner">
            <a href="./ip_apply.html"><em class="icon icon-27 other"></em><span>提交保单</span></a>
        </div>
        <div class="weui-menu-inner">
            <em></em>
            <span>我的</span>
            <ul>
                <li><a href="./ip_my_apply.html">我要申请</a></li>
                <li><a href="./information_apply.html">认证</a></li>
                <li><a href="./information_my.html">我的信息</a></li>
            </ul>
        </div>
    </section>-->
</footer>
</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/wxOpen.js"></script>
<script src="js/jquery.form.min.js"></script>
<script src="js/jquery-mvalidate.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript">
    $("input[name='openId']").val(openId);

    $(function(){
        $.mvalidateExtend({
            userName:{
                required : true,
                pattern : /^[\u4e00-\u9fa5]{1,5}$/,
                descriptions:{
                    required : '<div class="field-invalidmsg">请输入姓名</div>',
                    pattern : '<div class="field-invalidmsg">小于等于5个汉字</div>',
                    valid : '<div class="field-validmsg">正确</div>'
                }
            },
            phoneNo:{
                required : true,
                //pattern : /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
                pattern : /^0?(1)(?!\\1{10}$)[0-9]{10}$/,
                descriptions:{
                    required : '<div class="field-invalidmsg">请输入手机号码</div>',
                    pattern : '<div class="field-invalidmsg">您输入的手机号码格式不正确</div>',
                    valid : '<div class="field-validmsg">正确</div>'
                }
            },
            idCard:{
                required : true,
                pattern : /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
                descriptions:{
                    required : '<div class="field-invalidmsg">请输入身份证号码</div>',
                    pattern : '<div class="field-invalidmsg">您输入的身份证号码格式不正确</div>',
                    valid : '<div class="field-validmsg">正确</div>'
                }
            },
            inviteCode:{
                required : true,
                pattern : /^[0-9]{8}$/,
                descriptions:{
                    required : '<div class="field-invalidmsg">请输入邀请码</div>',
                    pattern : '<div class="field-invalidmsg">长度为8位的数字</div>',
                    valid : '<div class="field-validmsg">正确</div>'
                }
            }
        });
        $("#login-form").mvalidate({
            type:2,
            onKeyup:true,
            sendForm:true,
            firstInvalidFocus:true,
            descriptions:{ }
        });


        //认证表单提交
        $('form').on('submit', function() {
            console.log($(this).serialize());

            mui('#submitBtn').button('loading');
            $(this).ajaxSubmit({
                type: 'post',
                url:  url + 'weixin/userAuth.do',
                data: $('#login-form').serialize(),
                datatype:"json",
                success: function(data) {
                    console.log(data);
                    if(data.repCode == "000000"){
                        if(data.data.authFlag == "3"){
                            window.location.href = "information_apply_success.html";
                        }else if(data.data.authFlag == "4"){ //未关注
                            mui('#submitBtn').button('reset');
                            mui.toast(data.data.authMsg);
                        }else{
                            mui('#submitBtn').button('reset');
                            mui.toast(data.data.authMsg);
                        }
                    }else if(data.repCode == "999999"){
                        mui('#submitBtn').button('reset');
                        mui.toast("参数错误");
                    }
                },
                error: function () {
                    mui('#submitBtn').button('reset');
                    mui.toast("认证表单提交失败");
                }
            });
            return false; // 阻止表单自动提交事件
        });
    })
</script>
</html>